import dash
from dash import html, dcc
import dash_leaflet as dl
from dash_extensions.javascript import assign
from dash.dependencies import Input, Output, State

app = dash.Dash(__name__)

geojson_demo = eval(open('./四大片区.geojson', encoding='utf-8').read())

geojson_filter = assign(
    '''
    (feature, context) => {
        if (context.props.hideout.split(",").includes(feature.properties.id)) {
            return true;
        }  
    }
    '''
)

app.layout = html.Div(
    [
        dcc.Store(
            id='geo-selector-four-area-selected-features-id',
            data=[]
        ),
        html.Div(
            id='selected-features-id-print',
            style={
                'height': '40px',
                'textAlign': 'center'
            }
        ),
        dl.Map(
            [
                dl.TileLayer(
                    opacity=0.8,
                    url='http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
                ),
                dl.GeoJSON(
                    data=geojson_demo,
                    zoomToBounds=True,
                    options={
                        'style': {
                            'color': 'grey',
                            'weight': 2
                        }
                    },
                    id='geo-selector-four-area-geojson'
                ),
                dl.GeoJSON(
                    data=geojson_demo,
                    options={
                        'filter': geojson_filter,
                        'style': {
                            'weight': 2
                        }
                    },
                    id="geo-selector-four-area-selected"
                )
            ],
            minZoom=8,
            maxZoom=8,
            zoomControl=False,
            style={
                'height': 'calc(100% - 40px)',
                'margin': "auto"
            }
        ),
    ],
    style={
        'height': '100vh',
        'position': 'relative'
    }
)


@app.callback(
    Output('geo-selector-four-area-selected-features-id', 'data'),
    [Input('geo-selector-four-area-geojson', 'n_clicks'),
     Input('geo-selector-four-area-selected', 'n_clicks')],
    [State('geo-selector-four-area-geojson', 'click_feature'),
     State('geo-selector-four-area-selected', 'click_feature'),
     State('geo-selector-four-area-selected-features-id', 'data')]
)
def store_selected_feature(geojson_n_clicks,
                           selected_n_clicks,
                           geojson_click_feature,
                           selected_click_feature,
                           data):
    if dash.callback_context.triggered[0]['prop_id'] == 'geo-selector-four-area-geojson.n_clicks':

        if geojson_click_feature:

            if geojson_click_feature['properties'].get('id') in data:
                data.remove(geojson_click_feature['properties'].get('id'))

                return data

            data.append(geojson_click_feature['properties'].get('id'))
            return data

    if dash.callback_context.triggered[0]['prop_id'] == 'geo-selector-four-area-selected.n_clicks':

        if selected_click_feature:

            if selected_click_feature['properties'].get('id') in data:
                data.remove(selected_click_feature['properties'].get('id'))

                return data

            data.append(selected_click_feature['properties'].get('id'))
            return data

    return dash.no_update


app.clientside_callback(
    "(data) => data.toString()",
    Output('geo-selector-four-area-selected', 'hideout'),
    Input('geo-selector-four-area-selected-features-id', 'data'),
    prevent_initial_call=True
)


@app.callback(
    Output('selected-features-id-print', 'children'),
    Input('geo-selector-four-area-selected-features-id', 'data')
)
def show_selected_features_id(data):
    return str(data)


if __name__ == '__main__':
    app.run_server(debug=True)
